<template>
  <div class="content" v-if="details">
    <div class="goods-cover-box">
      <mt-swipe :auto="4000">
        <mt-swipe-item v-for="(item,index) in details.goods_info.banner" :key="index"><img :src="item" alt="商品图片"></mt-swipe-item>
      </mt-swipe>
    </div>
    <div class="goods-description-box">
      <h5>{{details.goods_name}}</h5>
      <p><span>兑换积分：<span class="credits">{{details.goods_info.scores}}分</span></span><span class="origin-price">￥{{details.goods_info.market_price}}</span><span class="shipping">{{parseFloat(details.goods_info.freight)? '运费：'+details.goods_info.freight : '免运费'}}</span></p>
    </div>
    <div class="info-box">
      <div class="info-header">
        <h3>
            <img src="~assets/img/mall/icon_details.png" alt="">
            商品情况
        </h3>
      </div>
      <div class="info-content" v-html="details.goods_info.goods_info"></div>
    </div>
    <div class="info-box">
      <div class="info-header">
        <h3>
            <img src="~assets/img/mall/icon_instruction.png" alt="">
            特别说明
        </h3>
      </div>
      <div class="info-content" v-html="details.goods_info.instructions"></div>
    </div>
    <div class="button-box">
      <button class="exchange" :disabled="!has_credits" @click="toChange">{{has_credits ? '马上兑换' : '积分不足'}}</button>
    </div>
  </div>
</template>

<script>
import { apiPost } from "src/common/api.js";
export default {
  name: "goods-details",
  data() {
    return {
      details: null
    };
  },
  computed: {
    has_credits() {
      if (this.details) {
        return (
          parseInt(this.details.user_scores) > parseInt(this.details.goods_info.scores)
        );
      }
    }
  },
  mounted() {
    this.getDetails();
  },
  methods: {
    getDetails() {
      apiPost("goods_detail", {
        goods_id: this.$route.params.goods_id
      }).then(res => {
        if (res.status === 0) {
          this.details = res.data;
        } else {
          console.log(res.msg);
        }
      });
    },
    toChange() {
      if (this.details.has_address === 0) {
        this.$router.push("/address_add");
      } else {
        this.$router.push({
          path: "/order_check",
          query: { goods_id: this.details.goods_info.id }
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  background: #f4f4f6;
  .goods-cover-box {
    height: 73.33vw;
    img {
      width: 100%;
    }
  }
  .goods-description-box {
    padding: 10px 15px;
    background: #fff;
    h5 {
      font-size: 15px;
      font-weight: 400;
    }
    p {
      display: flex;
      justify-content: space-between;
      font-size: 13px;
      .credits {
        color: #ff5a5a;
      }
      .origin-price {
        text-decoration: line-through;
      }
    }
  }
  .info-box {
    padding: 0 15px;
    margin: 10px 0;
    border-bottom: 1px solid #d2d2d2;
    background: #fff;
    .info-header h3 {
      height: 60px;
      line-height: 60px;
      font-size: 17px;
      font-weight: 500;
      box-sizing: border-box;
      border-bottom: 1px solid #d2d2d2;
      img {
        width: 25px;
        object-fit: contain;
      }
    }
    .info-content {
      padding: 15px 0;
    }
  }
  .button-box {
    padding: 15px 20px 25px;
    a,
    button {
      display: inline-block;
      width: 100%;
      height: 45px;
      line-height: 45px;
      text-align: center;
      border: none;
      outline: none;
      font-size: 16px;
      color: #fff;
      background: #78d041;
    }
    a:disabled,
    button:disabled {
      color: #333;
      background: #999;
      pointer-events: none;
    }
  }
}
</style>